{include file="public/header" /}
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: #ffffff;
    }

    .star {
        font-size: 30px;
    }
</style>
<table class="table table-hover">
    <tr>
        <th width="30" style="border-bottom: none"></th>
        <th width="50" style="border-bottom: none">{:lang('label')['headimg']}</th>
        <th width="100" style="border-bottom: none">{:lang('label')['name']}</th>
        <th width="100">{:lang('label')['phone']}</th>
        <!--<th width="100">性别</th>-->
        <th width="80" style="border-bottom: none">状态
            <div style="float: right;margin-right: 10px;font-size: 13px" onclick="refrush()" title="刷新">
                <span id="number" style="color: red">30</span>
                <a id="refrush" style="cursor: pointer" class="am-icon-refresh">刷新</a>
            </div>
        </th>
    </tr>
    {volist name="data" id="express"}
    <tr class="order_tr" id="{$express.id}" name="{$express.lng},{$express.lat}">
        <td style="padding: 0;text-align: center"><span style="color: red;display: none" class="star">⭐</span></td>
        <td><img width="30" class="radius-circle" height="30" src="{$express.headimg}"/></td>
        <td style="line-height:30px">{$express.name}</td>
        <td style="line-height:30px">{$express.phone}</td>
        <!--<td>{if !$express.sex || $express.sex == 0}女{elseif $express.sex == 1}男{else}保密{/if}</td>-->
        <td>{if $express.active}在线{else}离线{/if}</td>
    </tr>
    {/volist}
</table>
{include file="public/pages" /}
<script>
    var number = $("#number").html();

    function auto() {
        number--;
        $("#number").html(number);
        if (number > 0) {
            setTimeout(function () {
                auto();
            }, 1000)
        } else {
            refrush();
        }
    }

    auto();

    function refrush() {
        $("#refrush").attr('class', 'am-icon-refresh am-icon-spin');
        setTimeout(function () {
            window.location.reload();
        }, 1000)
    }

    $(".order_tr").click(function () {
        parent.express_id = this.id;
        var order_id = parent.order_id;
        if (order_id != 0) {
            parent.$("#iframe").attr("src", '__URL__/dispatch?order_id=' + order_id + '&express_id=' + this.id);
        } else {
            parent.$("#iframe").attr("src", 'http://uri.amap.com/marker?position=' + $(this).attr('name'));
        }
        $(".order_tr").find('.star').css('display', 'none');
        $(this).find('.star').css('display', '');
    })
</script>
